<template>
<div class="PayTypeList">
  <div class="header">
    <van-nav-bar title="月度流水" left-arrow @click-left="$router.back()" />
    <div class="changeMonth">
      <span>{{year}}年{{month}}月流水</span>
      <span style="color: #1041FF" @click="changeMon">切换其他月份</span>
    </div>
    <van-datetime-picker
        v-model="currentDate"
        v-show="show"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="cancel"
        @confirm="confirm"
    />
    <div class="list" v-if="list.length > 0">
      <div v-for="(item, key) in list" :key="key">
        <span>{{item[0]}}</span>
        <span>{{item[1]}}</span>
      </div>
    </div>
    <div v-else class="noList">本月暂无消费记录</div>
  </div>
</div>
</template>

<script>
export default {
  name: "PayTypeList",
  data() {
    return {
      // 时间选择器是否展示
      show: false,
      // 最小可选取时间
      minDate: new Date(2020, 0, 1),
      // 最大可选取时间
      maxDate: new Date(2025, 10, 1),
      // 选择器绑定时间
      currentDate: new Date(),
      year : new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      list:[] // 接收月度流水
    }
  },
  created() {
    this.getList()
    this.tagList()
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
    changeMon() {
      this.show = true
    },
    cancel() {
      this.show = false
    },
    // 选择其他月份后重新计算流水
    confirm() {
      // console.log(this.currentDate.getMonth() + 1)
      this.year = this.currentDate.getFullYear()
      this.month = this.currentDate.getMonth() + 1
      this.show = false
      this.getList()
      this.tagList()
    },
    // 获取对应月份支出列表
    getList() {
      let month = this.month >= 10 ? this.month : '0' + this.month
      let date = `${this.year}-${month}`
      this.list = this.$store.state.payList.filter((item) =>{
        return item.date.slice(0,7) == date
      })
    },
    // 从对应月份支出列表中取出支出类型和金额
    tagList() {
      let tagList = new Map()
      this.list.forEach((item) =>{
        item.tagName.forEach((item1) =>{
          if (tagList.has(item1.type)) {
            let money = tagList.get(item1.type) + item1.money
            tagList.set(item1.type,money)
          } else {
            tagList.set(item1.type,item1.money)
          }
        })
      })
      // console.log(tagList)
      this.list = [...tagList]
      // this.list  = tagList
      // console.log(this.list)
    }
  },
}
</script>

<style lang="less" scoped>
.changeMonth {
  display: flex;
  justify-content: space-around;
  span {
    display: inline-block;
  }
}
.list {
  div {
    display: flex;
    font-size: 3vh;
    justify-content: space-between;
    padding-bottom: 1vh;
    border-bottom: #e3e6e8 solid 1px;
    span{
      font-size: 3.5vh;
      padding:2vh;
    }
    span:first-child{
      padding-right:1vh;
    }
  }
}
.noList {
  padding: 2vh;
  color: red;
  text-align: center;
}
</style>
